<template>
  <chart :auto-resize="true" :options="options"> </chart>
</template>

<script>
var data = [
  { value: 40, name: "员工设备" },
  { value: 20, name: "公共设备" },
  { value: 40, name: "冷冻站" },
  { value: 40, name: "照明插座" },
];

export default {
  name: "subitem",
  data() {
    return {
      options: {
        tooltip: {
          trigger: "item",
          formatter: " <br/>{b}: {c} ({d}%)",
        },
        title: {
          text: "2000",
          left: "center",
          top: "45%",
          textStyle: {
            color: "#48EAFF",
            fontSize: 23,
            align: "center",
            fontFamily: "YouSheBiaoTiHei",
          },
        },
        graphic: {
          type: "text",
          left: "center",
          top: "40%",
          style: {
            text: "用电总量",
            textAlign: "center",
            fill: "#fff",
            fontSize: 14,
          },
        },
        legend: [
          {
            orient: "horizontal",
            icon: "bar",
            itemWidth: 12, // 设置宽度
            itemHeight: 5, // 设置高度
            left: 0,
            top: 20,
            data: ["员工设备"],
            // //   data: ["紧急告警", "一般告警"],
            // textStyle: {
            //   color: ["#48EAFF"],
            //   fontSize: 12,
            // },
            formatter: function (name) {
              var total = 0;
              var target;
              for (var i = 0, l = data.length; i < l; i++) {
                total += data[i].value;
                if (data[i].name == name) {
                  target = data[i].value;
                }
              }
              var arr = [
                "{a|" +
                  name +
                  " :}{b|" +
                  ((target / total) * 100).toFixed(2) +
                  "%}",
              ];
              return arr.join("\n");
            },
            textStyle: {
              rich: {
                a: {
                  fontSize: 12,
                  align: "left",
                  color: ["#48EAFF"],
                  padding: [0, 0, 0, 10],
                },
                b: {
                  fontSize: 12,
                  color: ["#48EAFF"],
                  align: "right",
                  padding: [0, 0, 0, 10],
                  lineHeight: 25,
                },
              },
            },
            //   backgroundColor: "#fff"

            // },
          },
          {
            orient: "vertical",
            itemWidth: 12, // 设置宽度
            itemHeight: 5, // 设置高度
            left: 0,
            bottom: 20,
            data: ["公共设备"],
            formatter: function (name) {
              var total = 0;
              var target;
              for (var i = 0, l = data.length; i < l; i++) {
                total += data[i].value;
                if (data[i].name == name) {
                  target = data[i].value;
                }
              }
              var arr = [
                "{a|" +
                  name +
                  " :}{b|" +
                  ((target / total) * 100).toFixed(2) +
                  "%}",
              ];
              return arr.join("\n");
            },
            textStyle: {
              rich: {
                a: {
                  fontSize: 12,
                  color: ["#48EAFF"],
                  align: "left",
                  padding: [0, 0, 0, 10],
                },
                b: {
                  fontSize: 12,
                  color: ["#48EAFF"],
                  align: "right",
                  padding: [0, 0, 0, 10],
                  // lineHeight:25
                },
              },
            },
            //   backgroundColor: "#fff"
          },
          //   data: ["紧急告警", "一般告警"],
          // textStyle: {
          //   color: ["#48EAFF"],
          //   fontSize: 12,
          // },
          //   },
          {
            orient: "vertical",
            itemWidth: 12, // 设置宽度
            itemHeight: 5, // 设置高度
            right: 10,
            top: 25,
            data: ["冷冻站"],
            formatter: function (name) {
              var total = 0;
              var target;
              for (var i = 0, l = data.length; i < l; i++) {
                total += data[i].value;
                if (data[i].name == name) {
                  target = data[i].value;
                }
              }
              var arr = [
                "{a|" +
                  name +
                  " :}{b|" +
                  ((target / total) * 100).toFixed(2) +
                  "%}",
              ];
              return arr.join("\n");
            },
            textStyle: {
              rich: {
                a: {
                  fontSize: 12,
                  color: ["#48EAFF"],
                  align: "left",
                  padding: [0, 0, 0, 10],
                },
                b: {
                  fontSize: 12,
                  color: ["#48EAFF"],
                  align: "right",
                  padding: [0, 0, 0, 10],
                  // lineHeight:25
                },
              },
            },
            //   backgroundColor: "#fff"
          },
          //   data: ["紧急告警", "一般告警"],
          // textStyle: {
          //   color: ["#48EAFF"],
          //   fontSize: 12,
          // },
          //   },
          {
            orient: "vertical",
            itemWidth: 12, // 设置宽度
            itemHeight: 5, // 设置高度
            right: 0,
            bottom: 20,
            data: ["照明插座"],
            formatter: function (name) {
              var total = 0;
              var target;
              for (var i = 0, l = data.length; i < l; i++) {
                total += data[i].value;
                if (data[i].name == name) {
                  target = data[i].value;
                }
              }
              var arr = [
                "{a|" +
                  name +
                  " :}{b|" +
                  ((target / total) * 100).toFixed(2) +
                  "%}",
              ];
              return arr.join("\n");
            },
            textStyle: {
              rich: {
                a: {
                  fontSize: 12,
                  align: "left",
                  color: ["#48EAFF"],
                  padding: [0, 0, 0, 10],
                },
                b: {
                  fontSize: 12,
                  color: ["#48EAFF"],
                  align: "right",
                  padding: [0, 0, 0, 10],
                  // lineHeight:25
                },
              },
            },
            //   backgroundColor: "#fff"
          },
          //   data: ["紧急告警", "一般告警"],
          // textStyle: {
          //   color: ["#48EAFF"],
          //   fontSize: 12,
          // },
          //   },
        ],

        series: [
          {
            // name: '访问来源',
            type: "pie",
            radius: ["50%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "left",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                // fontWeight: "bold",
                color: "#2769f7",
              },
            },
            color: ["#49FDD4", "#D6FD82", "#D58BFD", "#688EFD"],
            data: [
              {
                value: 1.03,
                name: "员工设备",
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 2.1,
                name: "公共设备",
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 7.33,
                name: "冷冻站",
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: 3.2,
                name: "照明插座",
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
            ],
          },
        ],
      },
    };
  },
};
</script>
